<template>
    <div class="main-content">
      <component :is="currentComponent" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue';
  import UserManagement from './UserManagement.vue';
  import BookManagement from './BookManagement.vue';
  import ProductManagement from './ProductManagement.vue';
  import ArticleManagement from './ArticleManagement.vue';
  import RestaurantManagement from './RestaurantManagement.vue';
  
  const props = defineProps<{
    activeSection: string;
  }>();
  
  const currentComponent = computed(() => {
    switch (props.activeSection) {
      case 'user':
        return UserManagement;
      case 'book':
        return BookManagement;
      case 'product':
        return ProductManagement;
      case 'article':
        return ArticleManagement;
      case 'restaurant':
        return RestaurantManagement;
      default:
        return UserManagement; // 默认组件
    }
  });
  </script>
  
  <style scoped>
  .main-content {
    flex: 1;
    padding: 20px;
  }
  </style>
  